﻿<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml"   lang="en" xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>
	<!-- Basic Page Needs -->
	<meta charset="UTF-8">
	<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
	<title>Shop Checkout</title>

	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- Boostrap style -->
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">

	<!-- Theme style -->
	<link rel="stylesheet" type="text/css" href="/css/style.css">

	<!-- Reponsive -->
	<link rel="stylesheet" type="text/css" href="/css/responsive.css">

</head>
<body class="header_sticky">
	<div class="boxed">

		<section id="header" class="header">

			<div th:replace="./module/header::header"></div>
			<div th:replace="./module/category::category"></div>
					
		</section><!-- /#header -->

		<section class="flat-breadcrumb">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<ul class="breadcrumbs">
							<li class="trail-item">
								<a href="#" title="">主页</a>
								<span><img src="/images/icons/arrow-right.png" alt=""></span>
							</li>
							<li class="trail-item">
								<a href="#" title="">商城</a>
								<span><img src="/images/icons/arrow-right.png" alt=""></span>
							</li>
							<li class="trail-end">
								<a href="#" title="">下单</a>
							</li>
						</ul><!-- /.breacrumbs -->
					</div><!-- /.col-md-12 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section><!-- /.flat-breadcrumb -->

		<section class="flat-checkout">
			<div class="container">
				<div class="row">
					<div class="col-md-7">
						<form id="orderForm"  action="/order/create.html" method="post">
							<input type="hidden" name="payment" th:value="${#aggregates.sum(cartList.![price * num]) / 100}"/>
							<input type="hidden" name="paymentType" value="2"/>
							<input type="hidden" name="postFee" value="10"/>
							<div th:each="cart,cartStat : ${cartList}">
								<input type="hidden" th:name="|orderItems[${cartStat.index}].itemId|" th:value="${cart.id}"/>
								<input type="hidden" th:name="|orderItems[${cartStat.index}].num|" th:value="${cart.num}"/>
								<input type="hidden" th:name="|orderItems[${cartStat.index}].price|" th:value="${cart.price}"/>
								<input type="hidden" th:name="|orderItems[${cartStat.index}].totalFee|" th:value="${cart.price * cart.num}"/>
								<input type="hidden" th:name="|orderItems[${cartStat.index}].title|" th:value="${cart.title}"/>
								<input type="hidden" th:name="|orderItems[${cartStat.index}].picPath|" th:value="${cart.image}"/>
							</div>
							<div class="box-checkout">
								<div class="billing-fields">
									<div class="fields-title">
										<h3>填写信息</h3>
										<span></span>
										<div class="clearfix"></div>
									</div><!-- /.fields-title -->
									<div class="fields-content">
										<div class="field-row">
											<p class="field-one-half">
												<label >收货人姓名</label>
												<input type="text"  name="orderShipping.receiverName" placeholder="收货人姓名" required/>
											</p>
											<div class="clearfix"></div>
										</div>
										<div class="field-row">
											<label >电话</label>
											<input type="text" placeholder="收货人电话" name="orderShipping.receiverMobile"  required/>
										</div>
										<div class="field-row">
											<label>省</label>
                                            <select id="s_province" name="orderShipping.receiverState"></select>&nbsp;&nbsp;
                                        </div>
										<div class="field-row">
											<label >城市</label>
                                            <select id="s_city" name="orderShipping.receiverCity" ></select>&nbsp;&nbsp;

                                        </div>
										<div class="field-row">
											<label >区</label>
                                            <select id="s_county" name="orderShipping.receiverDistrict"></select>
                                            <script type="text/javascript" src="/js/area.js" charset="UTF-8"></script>
                                            <script type="text/javascript">_init_area();</script>
										</div>
										<div class="field-row">
											<label >详细地址</label>
											<input type="text"  name="orderShipping.receiverAddress"  required/>

											<div class="clearfix"></div>
										</div>
									</div><!-- /.fields-content -->
								</div><!-- /.billing-fields -->
							</div><!-- /.box-checkout -->
						</form>
					</div><!-- /.col-md-7 -->
					<div class="col-md-5">
						<div class="cart-totals style2">
							<h3>您的订单</h3>
							<table class="product">
								<thead>
								<tr>
									<th>商品</th>
									<th>数量</th>
									<th>价格</th>
									<th>小计</th>
								</tr>
								</thead>
								<tbody>

								<tr th:each="cart,cartStat : ${cartList}">
									<td>[[${cart.title}]]</td>
									<td>[[${cart.num}]]</td>
									<td>¥[[${cart.price / 100 }]]</td>
									<td>¥[[${cart.price / 100 * cart.num}]]</td>
								</tr>
								</tbody>
							</table><!-- /.product -->
							<table>
								<tbody>
								<tr>
									<td>合计</td>
									<td class="subtotal">[[${#aggregates.sum(cartList.![price * num]) / 100}]]</td>
								</tr>
								<tr>
									<td>邮费</td>
									<td class="btn-radio">
										<div class="radio-info">
											<input type="radio" checked id="flat-rate" name="radio-flat-rate">
											<label for="flat-rate">邮费： <span>$0.00</span></label>
										</div>
										<div class="radio-info">
											<input type="radio" id="free-shipping" name="radio-flat-rate">
											<label for="free-shipping">包邮</label>
										</div>
									</td><!-- /.btn-radio -->
								</tr>
								<tr>
									<td>合计</td>
									<td class="price-total">[[${#aggregates.sum(cartList.![price * num]) / 100}]]</td>
								</tr>
								</tbody>
							</table>
							<div class="checkbox">
								<input type="checkbox" id="checked-order" name="checked-order" checked>
								<label for="checked-order">我同意任何条款</label>
							</div><!-- /.checkbox -->
							<div class="btn-order">
								<button type="submit" onclick="$('#orderForm').submit()" class="order" title="">付款</button>
							</div><!-- /.btn-order -->

						</div><!-- /.cart-totals style2 -->
					</div><!-- /.col-md-5 -->
				</div><!-- /.row -->
			</div><!-- /.container -->
		</section><!-- /.flat-checkout -->


		<div th:replace="./module/footer::footer"></div>


	</div><!-- /.boxed -->

		<!-- Javascript -->
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/tether.min.js"></script>
		<script type="text/javascript" src="/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/js/waypoints.min.js"></script>
		<script type="text/javascript" src="/js/jquery.circlechart.js"></script>
		<script type="text/javascript" src="/js/easing.js"></script>
		<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
		<script type="text/javascript" src="/js/owl.carousel.js"></script>
		<script type="text/javascript" src="/js/smoothscroll.js"></script>
		<script type="text/javascript" src="/js/jquery-ui.js"></script>
		<script type="text/javascript" src="/js/jquery.mCustomScrollbar.js"></script>
	   	<script type="text/javascript" src="/js/gmap3.min.js"></script>
	   	<script type="text/javascript" src="/js/waves.min.js"></script>
		<script type="text/javascript" src="/js/jquery.countdown.js"></script>

		<script type="text/javascript" src="/js/main.js"></script>

    <script type="text/javascript">
        var Gid  = document.getElementById ;
        var showArea = function(){
            Gid('show').innerHTML = "<h3>" + Gid('s_province').value + " - " +
                Gid('s_city').value + " - " +
                Gid('s_county').value + "</h3>"
        }
        Gid('s_county').setAttribute('onchange','showArea()');
    </script>

</body>	
</html>
